<template>
  <div class="dialog">
    <el-dialog
      title="出库信息"
      :visible.sync="showDialog"
      width="80%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="出库单号：" prop="outboundNo">
              <el-input
                v-model="formData.outboundNo"
                placeholder="请输入出库单号"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库人：" prop="personNo">
              <el-select
                v-model="formData.personNo"
                style="width: 100%;"
                placeholder="请选择"
                clearable
                @change="personChange"
              >
                <el-option
                  v-for="item in personOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="出库日期：" prop="date">
              <el-date-picker
                v-model="formData.date"
                style="width: 100%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库图片：">
              <el-upload
                ref="upload"
                class="upload-file"
                action
                multiple
                :limit="1"
                :on-remove="params => removePicture(params)"
                :http-request="params => addPicture(params)"
                :file-list="pictureList"
                accept=".png, .jpg, .jpeg, .pdf"
              >
                <el-button
                  v-if="pictureList.length < 1"
                  type="text"
                  class="add-many"
                >点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item style="width:100%;" label="出库货：" />
            <el-table
              :data="formData.outboundMaterialMapperList"
              border
              style="width: 100%; margin-left: 10px;"
              class="saleTable"
              current-row-key
            >
              <!-- <el-table-column type="index" width="50" /> -->
              <el-table-column label="出货品名称" width="160">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.materialNo"
                    style="width: 100%;"
                    placeholder="请选择"
                    clearable
                    @change="materialChanege(scope)"
                  >
                    <el-option
                      v-for="item in productionOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="出库批次" width="300">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.rawMaterialBatchNo"
                    style="width: 100%;"
                    clearable
                    placeholder="请选择"
                    @change="rawMaterialBatchChanege(scope)"
                  >
                    <el-option
                      v-for="item in rawMaterialBatchOptions"
                      :key="item.value"
                      :label="item.rawMaterialBatchNo"
                      :value="item.rawMaterialBatchNo"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="出货仓库" width="150">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.stordocNo"
                    style="width: 100%;"
                    clearable
                    disabled
                    placeholder="请选择"
                    @change="stordocChanege(scope)"
                  >
                    <el-option
                      v-for="item in warehouseOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="materialspec" label="规格" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.materialspec"
                    placeholder="请输入规格"
                    disabled
                  />
                </template>
              </el-table-column>
              <el-table-column prop="model" label="型号" width="120">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.model"
                    placeholder="输入型号"
                    disabled
                  />
                </template>
              </el-table-column>
              <el-table-column label="出货数量" prop="quantity">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.quantity"
                    type="number"
                    :min="0"
                    :placeholder="scope.row.rawMaterialBatchNo ? `输入销售数量(已存数量${ scope.row.quantityCopy}${ scope.row.unitName || ''})` : '请先选择出库批次'"
                    clearable
                    :disabled="!scope.row.rawMaterialBatchNo"
                    @input="InputChange($event,scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="model" label="单位" width="100">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.unitName"
                    placeholder="输入型号"
                    disabled
                  />
                </template>
              </el-table-column>
              <el-table-column width="50" label="操作">
                <template slot-scope="scope">
                  <div class="pointer" @click="delTableItem(scope)">删除</div>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="addProduct" @click="addTableItem">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QualityManage from "@/api/processing-management/quarity-manage";
import { deepClone } from "@/utils/index";
export default {
  name: "Addeditdialog",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    outboundNo: {
      type: String,
      default: ""
    },
    personOptions: {
      type: Array,
      default: () => []
    },
    warehouseOptions: {
      type: Array,
      default: () => []
    },
    productionOptions: {
      type: Array,
      default: () => []
    },
    rawMaterialBatchOptions: {
      type: Array,
      default: () => []
    },
    editData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      pictureList: [],
      title: "出库列表",
      formData: {
        outboundNo: "",
        date: "",
        outboundMaterialMapperList: []
      },
      maxQuantity: 0,
      showDialog: this.show,
      rules: {
        outboundNo: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        personNo: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        date: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ]
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    outboundNo(v) {
      this.formData.outboundNo = v;
    },
    editData(v) {
      console.log(v);
      this.formData = deepClone(v);
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 获取销售人
    personChange(item) {
      let Item = this.personOptions.find(e => {
        return e.value === item;
      });
      this.formData.personName = Item.name;
    },
    stordocChanege(scope) {
      scope.row.materialName = "";
      scope.row.materialNo = "";
      scope.row.rawMaterialBatchNo = "";
      scope.row.quantity = "";
      scope.row.model = "";
      scope.row.materialspec = "";
      this.$emit("stordocChanege", scope.row.stordocNo);
    },
    materialChanege(scope) {
      scope.row.stordocName = "";
      scope.row.stordocNo = "";
      scope.row.rawMaterialBatchNo = "";
      scope.row.quantity = "";
      scope.row.model = "";
      scope.row.materialspec = "";
      this.$emit("materialChanege", scope.row.materialNo);
    },
    rawMaterialBatchChanege(scope) {
      let Item = this.rawMaterialBatchOptions.find(
        item => item.rawMaterialBatchNo === scope.row.rawMaterialBatchNo
      );
      console.log(Item);
      // let params = {
      //   rawMaterialBatchNo: scope.row.rawMaterialBatchNo
      // };
      // OuterWarehouseApi.rawMaterialQueryByCondition(params).then(res => {
      //   if (res.code === 1) {
      //     let Item = res.data[0];
      //     scope.row.materialName = Item.material.materialName;
      //     scope.row.materialNo = Item.material.materialNo;
      //     scope.row.stordocNo = Item.stordocNo;
      //     scope.row.stordocName = Item.stordocName;
      //     scope.row.model = Item.material.model;
      //     scope.row.materialspec = Item.material.materialspec;
      //     scope.row.quantityCopy = Item.quantity;
      //     scope.row.unitName = Item.unitName;
      //     scope.row.unitNo = Item.unitNo;
      //     this.maxQuantity = Item.quantity;
      //   }
      // });
      scope.row.materialName = Item.material.materialName;
      scope.row.materialNo = Item.material.materialNo;
      scope.row.stordocNo = Item.stordocNo;
      scope.row.stordocName = Item.stordocName;
      scope.row.model = Item.material.model;
      scope.row.materialspec = Item.material.materialspec;
      scope.row.quantityCopy = Item.quantity;
      scope.row.unitName = Item.unitName;
      scope.row.unitNo = Item.unitNo;
      this.maxQuantity = Item.quantity;
    },
    InputChange(val, index) {
      let a = val.replace(/[^\d]+/g, "");
      this.$set(this.formData.outboundMaterialMapperList[index], "quantity", a);
      if (a > this.maxQuantity) {
        this.$message.error(`该批次库存数量还有${this.maxQuantity},无法出库`);
        return;
      }
    },
    addTableItem() {
      let item = {
        grade: "",
        materialName: "",
        materialNo: "",
        materialspec: "",
        model: "",
        quantity: "",
        stordocNo: "",
        stordocName: "",
        rawMaterialBatchNo: "",
        unitNo: "",
        unitName: ""
      };
      this.formData.outboundMaterialMapperList.push(item);
    },
    delTableItem(scope) {
      this.formData.outboundMaterialMapperList.splice(scope.$index, 1);
    },
    save(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          if (this.pictureList.length > 0) {
            let form = new FormData();
            console.log(this.pictureList[0]);
            form.append("file", this.pictureList[0]);
            let res = await QualityManage.addPicture(form);
            if (res.code !== 1) {
              this.$message.error("图片保存失败");
              return;
            }
            this.formData.pictureNo = res.data;
          }

          this.$emit("addEvent", this.formData);
          this.close();
        }
      });
    },
    close() {
      this.$emit("closeDialog");
      this.resetForm("ruleForm");
      this.pictureList = [];
    },
    cancel() {
      this.close();
    },
    // 重置验证
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removePicture(file) {
      const index = this.pictureList.findIndex(item => {
        return item.uid === file.uid;
      });
      this.pictureList.splice(index, 1);
      console.log(this.pictureList, "删除");
    },
    addPicture(file) {
      this.pictureList.push(file.file);
      console.log(this.pictureList, "添加");
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  min-width: 160px !important;
}
.pointer {
  cursor: pointer;
  text-decoration: underline;
  color: red;
}
.addProduct {
  width: 100%;
  margin-left: 10.5px;
  margin-top: 16px;
  background-color: rgb(72, 159, 225);
  color: #fff;
  font-weight: bold;
}
::v-deep .saleTable {
  overflow-y: visible;
}
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-form
  .el-row
  .el-table {
  max-height: 260px;
}
</style>
